import React, { Component } from "react";
import { Link, Routes, Route } from "react-router-dom";

import Home from "./components/Home";
import About from "./components/About";
export default class App extends Component {
  render() {
    return (
      <div style={{ height: "800px" }}>
        <div style={{ width: "80%", height: "100%", margin: "0 auto" }}>
          <br />
          <div>
            <h1>React Router Web</h1>
          </div>
          <div style={{ display: "flex" }}>
            <div style={{ width: "150px" }}>
              <Link className="nav-link" to="/about">
                About
              </Link>
              <Link className="nav-link" to="/home">
                Home
              </Link>
            </div>
            <div
              style={{
                flex: "1",
                border: "1px solid #ccc",
                height: "500px",
                padding: "10px",
              }}
            >
              <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/home" element={<Home />} />
              </Routes>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
